/*
 * @Description: 全宗操作组件
 * @Author: Rfan
 * @Date: 2022-05-28 12:10:37
 * @LastEditTime: 2022-05-30 10:43:08
 */

import { useMemo, useState } from 'react';
import { Button, Space } from 'antd';
import { useDictionaryContext } from '../contexts/DictionaryContext';
import AddDictionaryDialog from './dialogs/AddDictionary';
import EditDictionaryDialog from '@/view/system/Dictionary/components/dialogs/EditDictionary';
import { selectItemByKey } from '@/utils/list';

const PageTitle = () => {
  const { selectDictionary, dictionaryList, deleteDictionaryFunc } = useDictionaryContext();

  // 新建字典弹窗状态
  const [dicDialogVisible, setDicDialogVisible] = useState(false);
  // 编辑字典弹窗状态
  const [editDialogVisible, setEditDialogVisible] = useState(false);

  const showDicDialog = () => {
    setDicDialogVisible(true);
  };
  return (
    <>
      <div className="filter-container">
        <p className="page-title">字典维护</p>
        <Space size="small">
          <Button
            type="primary"
            danger
            onClick={() => {
              deleteDictionaryFunc(selectDictionary.id);
            }}
          >
            删除字典
          </Button>
          <Button
            type="primary"
            onClick={() => {
              showDicDialog();
            }}
          >
            新建字典
          </Button>
          <Button
            onClick={() => {
              setEditDialogVisible(true);
            }}
          >
            编辑字典
          </Button>
        </Space>
      </div>
      {useMemo(
        () => (
          <AddDictionaryDialog
            visible={dicDialogVisible}
            onClose={() => {
              setDicDialogVisible(false);
            }}
          />
        ),
        [dicDialogVisible]
      )}
      {useMemo(
        () => (
          <EditDictionaryDialog
            visible={editDialogVisible}
            data={selectItemByKey(selectDictionary.id, dictionaryList)}
            onClose={() => {
              setEditDialogVisible(false);
            }}
          />
        ),
        [editDialogVisible]
      )}
    </>
  );
};

export default PageTitle;
